---
title: Visually Hidden
description:
  Used to hide content visually but keep it accessible to screen readers.
---

<ExampleTabs name="visually-hidden-basic" />

## Usage

```jsx
import { VisuallyHidden } from "@chakra-ui/react"
```

```jsx
<VisuallyHidden>Hidden content</VisuallyHidden>
```

## Examples

### Input

Using the `asChild` prop, you can pass a child element to the `VisuallyHidden`
component.

<ExampleTabs name="visually-hidden-with-input" />
